<script lang="ts">
import { inject, onMounted, ref } from 'vue'
import { Viewer, GeoJsonDataSource } from 'cesium'
const baseUrl = import.meta.env.VITE_APP_BASE_URL


export default {
  name: 'CesiumContainer',
  setup () {
    const viewer = inject<Viewer>('Viewer')
    if (!viewer) return
    const a = ref<number>(20)
    console.log(a.value)
    onMounted(() => {
      /* eslint no-new: */
      // const viewer = new Viewer('cesiumContainer')
      const geojson = new GeoJsonDataSource('geojson')
      viewer.dataSources.add(geojson)
      geojson.load(baseUrl + '/json/ne_10m_us_states.topojson').then(function (dataSource) {
        viewer.flyTo(geojson)
      })

      setTimeout(() => {
        geojson.load(baseUrl + '/json/simplestyles.geojson').then(function (dataSource) {
          viewer.flyTo(geojson)
        })
      }, 10000)
    })
  }
}
</script>
<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
